<template>
    <div class="batlist_item_number">
        <div class="numberlist">
            <!-- 红球 -->
            <div class="parint" v-for="(item,index) in date.ballList" :key="index + 1" v-if="date['numberType'] != 1">
                <div class="numberdetail red">
                    <text class="white-color">{{item}}</text>
                </div>
                <!-- 红球-是否胆码 -->
				
                <image 
                    v-if=" !!date.dan &&  date.dan.indexOf(item) > -1 && date.numberType != 2 " 
                    class="dannumber" 
                    style="width:20px;height:20px;" 
                    src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/dan.png">
                </image>
                <!-- 红球-是否胆码end -->
            </div>

			<div class="wan flex pre" v-if="date['numberType'] == 5">
				<div class="parint" v-for="(item,index) in date.wan" :key="index + 'wan'" >
					<div class="numberdetail red" >
						<text class="white-color">{{item}}</text>
					</div>
				</div>
				<div class="line"></div>
			</div>

			<div class="thousand flex pre" v-if="date['numberType'] == 5">
				<div class="parint" v-for="(item,index) in date.thousand" :key="index + 'thousand'" >
					<div class="numberdetail red" >
						<text class="white-color">{{item}}</text>
					</div>
				</div>
				<div class="line"></div>
			</div>


			<div class="hundred flex pre" v-if="date['numberType'] == 1 || date['numberType'] == 5 ">
				<div class="parint" v-for="(item,index) in date.hundred" :key="index + 'hundred'" >
					<div class="numberdetail red" >
						<text class="white-color">{{item}}</text>
					</div>
				</div>
				<div class="line"></div>
			</div>

			<div class="ten flex pre" v-if="date['numberType'] == 1 || date['numberType'] == 5">
				<div class="parint" v-for="(item,index) in date.ten" :key="index + 'ten'" >
					<div class="numberdetail" :style="{ 'background-color' : date['numberType'] == 5 ? 'blue' : 'red'}">
						<text class="white-color">{{item}}</text>
					</div>
				</div>
				<div class="line"></div>
			</div>
            

			<div class="ge flex" v-if="date['numberType'] == 1 || date['numberType'] == 5">
				<div class="parint" v-for="(item,index) in date.ge" :key="index + 'ge'" >
					<div class="numberdetail" :style="{ 'background-color' : date['numberType'] == 5 ? 'blue' : 'red'}">
						<text class="white-color">{{item}}</text>
					</div>
				</div>
			</div>
            
         
            <!-- 红球end -->
        </div>
        <!-- 返回是否是自选还是机选 -->
        <!-- <div class="batlist_item_desc" v-if=" date.type == 'multiple'">
            <text style="margin-right:36px;font-size:24px; color:#333;">机选</text>
            <text style="margin-right:36px;font-size:24px; color:#333;">{{ date.title }}</text>
            <text style="margin-right:24px;font-size:24px; color:#333;">1注</text>
            <text style="margin-right:24px;font-size:24px; color:#333;">2元</text>
        </div> -->

        <div class="batlist_item_desc">
            <!-- <text style="margin-right:36px;font-size:24px; color:#333;">手选</text> -->
            <text style="margin-right:36px;font-size:24px; color:#333;">{{ date.title }}</text>
            <text style="margin-right:24px;font-size:24px; color:#333;">{{ date.number }}注</text>
            <text style="margin-right:24px;font-size:24px; color:#333;">{{ date.money }}元</text>
        </div>
        <!-- 返回是否是自选还是机选end -->
    </div>
</template>

<script>
export default {
    props:{
        columnData: {
            type:Object,
            required:true
        }
    },

    data() {
        return {

        }
    },

    computed:{
        date() {
            let iarr = ['directSelectFn', 'simplex', 'reexamine', 'paiSix', 'paiFive']
            
            return this[ iarr[ Number(this.columnData['numberType']) -1 ] ]()
            
        }
    },

    methods:{
        //直选数据
        directSelectFn() {
			this.columnData['title'] = '直选'		
			this.columnData['hundred'] = this.columnData['hundred'].sort((a,b)=>a-b)
            this.columnData['ten'] = this.columnData['ten'].sort((a,b)=>a-b)
			this.columnData['ge'] = this.columnData['ge'].sort((a,b)=>a-b)
            return this.columnData
        },

        // 排五
        paiFive() {
			this.columnData['title'] = '直选'
			this.columnData['wan'] = this.columnData['wan'].sort((a,b)=>a-b)
            this.columnData['thousand'] = this.columnData['thousand'].sort((a,b)=>a-b)
            this.columnData['hundreds'] = this.columnData['hundred'].sort((a,b)=>a-b)
            this.columnData['ten'] = this.columnData['ten'].sort((a,b)=>a-b)
			this.columnData['ge'] = this.columnData['ge'].sort((a,b)=>a-b)

			return this.columnData
        },

        //组三单式
        simplex() {
            this.columnData['ballList'] = [...this.columnData['chong'], ...this.columnData['dan']].sort((a,b)=>a-b)
            this.columnData['title'] = '组三单式'

            return this.columnData
        },

        //组三复试
        reexamine() {
            this.columnData['ballList'] = (!!this.columnData['dan'] ? this.deWeight([...this.columnData['no'], ...this.columnData['dan']]) : this.columnData['no']).sort((a,b)=>a-b)
            this.columnData['title'] = !!this.columnData['dan'] && this.columnData['dan'].length > 1 ? '组三胆拖' : '组三复式'

            return this.columnData
        },

        //组六
        paiSix() {
            this.columnData['ballList'] = (!!this.columnData['dan'] ? this.deWeight([...this.columnData['no'], ...this.columnData['dan']]) : this.columnData['no']).sort((a,b)=>a-b)
            this.columnData['title'] = !!this.columnData['dan'] && this.columnData['dan'].length > 1 ? '组六胆拖' : ( this.columnData['ballList'].length > 3 ? '组六复式' : '组六单式' )
            
            return this.columnData
		},
		
		deWeight(value) {
			return [...new Set(value)]
		}
    }
}
</script>

<style scoped>
.pre {
	position: relative;
	padding-right:10px;
	margin-right:10px;
}

.line {
	width:2px;
	height: 28px;
	background-color: #D9D5D5;
	position: absolute;
	right:0;
	top:21px;
}

.flex {
	display: flex;
    flex-direction: row ;
	max-width:510px;
    flex-direction: row;
    flex-wrap: wrap;
}
.numberlist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 540px;
	margin-bottom:10px;
}
  .batlist_item_desc {
    margin-left: 12px;
    display: flex;
    flex-direction: row;
  }
  .numberdetail {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .dannumber {
    position: absolute;
    top: 0;
    right: 0px;
  }
  .red {
    background-color: red;
  }
  .bluess {
    background-color: blue;
  }
  .batlist_item_icon {
    display: flex;
    justify-content: center;
    margin-left: 28px;
    margin-right: 38px;
  }
  .batlist_item_icon_delete {
    width: 40px;
    height: 40px;
  }
  .stepoption {
    width: 750px;
    left: 0;
    height: 73px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .stepoption_fl {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 32px;
    height: 73px;
  }
  .stepoption_rg {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 32px;
  }
  .protocol {
    width: 750px;
    height: 40px;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
  .protocol_fl {
    margin-left: 32px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
  .weex-elstepper-input {
    background-color: white;
  }
  /* .header {
    width: 750px;
    height: 90px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
  } */
  .header-title {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    font-family: PingFangSC-Medium;
  }
  .header-font-title {
    height: 90px;
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-font-pr {
    font-size: 28px;
    color: #333333;
  }
  .flex {
    display: flex;
  }
  .header-con {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .batlist-line {
    width: 710px;
    height: 12px;
    background-color: #c7c7c7;
    border-radius: 6px;
    position: absolute;
    left: 20px;
    top: 0px;
    z-index: 1;
  }
  .scroller-box {
    background-color: white;
    position: relative;
    left: 0;
    top: -7px;
    z-index: 3;
  }

  .scroller {
    width: 686px;
    height: 640px;
  }

  .option-icon-btn {
    width: 28px;
    height: 28px;
    margin-right: 16px;
  }
  .option-text-btn {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
  }
  .white-color {
    color: #fff;
    font-size: 28px;
  }
  .stepoption-minus {
    width: 70px;
    height: 74px;
    background-color: #f8f8f8;
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
  }
  .stepper-plus {
    width: 70px;
    height: 74px;
    background-color: #f8f8f8;
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
  }
  .stepoption-input {
    width: 106px;
    height: 74px;
    line-height: 74px;
    background-color: #fff;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-style: solid;
    border-color: #d5d5d5;
    text-align: center;
  }
  .stepoption-ct {
    width: 247px;
    height: 78px;
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .gray-font {
    color: #333;
    font-size: 24px;
  }
  .parint {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .batlist-gear{
    width: 686px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: -24px;
    left: 0;
    z-index: -1;
}

.br {
	border-right-color: #999;
	border-right-width: 1px;
	border-right-style: solid;
}
</style>
